<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { getOneWord } from '../api/one_word/index'

const data = reactive({
    poetry: {
        origin: {
            content: [],
            author: '',
            title: '',
            dynasty: '',
            translate: '',
        }
    },
    currentShow: 'poetry', // 'poetry', 'translate'
    imgHeight: 0
})
const poetryRef = ref()

const getPoetry = () => {
    getOneWord('oaWYJEKG21TiQ25lWB0qNsvMundo/QSg').then(res => {
        data.poetry = res.data as any
        data.imgHeight = poetryRef.value.style.height
        console.log(poetryRef.value.style.height);
    })
}

getPoetry()

const changeShow = (show_field: string) => {
    if (!data.poetry.origin.translate) {
        data.currentShow = 'poetry'
        return
    }
    data.currentShow = show_field
}

</script>

<template>
    <div class="container">
        <img :style="{ height: data.imgHeight + 'px' }" class="bg_img" src="https://www.uukey.cn/pay/m/api">
        <div class="poetry" ref="poetryRef">
            <div class="header">
                <div class="poetry_title">{{ data.poetry.origin.title }}</div>
                <div class="poetry_info">{{ data.poetry.origin.dynasty }}·{{ data.poetry.origin.author }}</div>
            </div>
            <div v-if="data.currentShow === 'poetry'">
                <div class="poetry_body" v-for="(item, index) in  data.poetry.origin.content" :key="index">{{ item }}</div>
            </div>
            <div v-if="data.currentShow === 'translate'">
                <div class="translate" v-for="(i, k) in data.poetry.origin.translate" :key="k">{{ i }}</div>
            </div>
            <div style="height: 80px;"></div>
        </div>
        <div class="control">
            <div class="btn" @click="getPoetry">换一首</div>
            <div class="btn" v-if="data.currentShow === 'poetry'" @click="changeShow('translate')">翻译</div>
            <div class="btn" v-if="data.currentShow === 'translate'"  @click="changeShow('poetry')">原文</div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    width: 100%;
    line-height: 0.6rem;
    color: #fff;

    .bg_img {
        position: absolute;
        width: 100%;
        z-index: -10;
        object-fit: cover;
        filter: brightness(50%);
        min-height: 100%;
    }

    .poetry {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 80px;
        max-width: calc(100% - 160px);

        .poetry_body {
            font-size: 0.3rem;
        }
    }

    .header {
        
        .poetry_title {
            font-size: 0.38rem;
            text-align: center;
        }

        .poetry_info {
            font-size: 0.28rem;
            text-align: center;
        }
    }

    .control {
        position: fixed;
        bottom: 0;
        padding: 20px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .btn {
            border: 3px solid #fff;
            padding: 0 50px;
            font-size: 0.25rem;
            border-radius: 50px;
            margin-right: 40px;
        }
    }
}
</style>

